import React from "react";
import '../assets/style/admin.scss'
import {Table, Space, Button, Popconfirm, message, Avatar, Breadcrumb, Select, Modal, Input } from 'antd';
import { noticefind, noticedestory, noticecreat } from "../util/api";
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import dayjs from "dayjs";

class Noticelist extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            addadmin: null,
            addadpasd: null,
            addadrloe: null,
        }
        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount(){
        this.getuserinfo()
    }

    async deleteclick(item){
        const admininfo = JSON.parse(localStorage.getItem('admin'))
        if(!admininfo) return message.error('登录过期,请重新登录')
        if(admininfo.role != 1) return message.error('你没有权限删除')
        console.info(item)
        const res = await noticedestory(item.noticeid)
        const { success } = res.data
        if(success){
            message.success('删除成功');
            this.getuserinfo()
        }
    }

    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };

    async getuserinfo(role){
        const res = await noticefind(role)
        const { success, data } = res.data
        if(success){
            const uinfo = []
            data.map((r,index)=>{
                uinfo.push({
                    noticeid: r.noticeid,
                    index: index+1,
                    key: index+1,
                    name: r.noticemsg,
                    addtime: dayjs(r.addTime).format('YYYY-MM-DD'),
                })
            })
            this.setState({data: uinfo})
        }
    }
    handleChange(value) {
        console.log(`selected ${value}`);
        if(value == 'all'){
            this.getuserinfo()
        }else if(value == 'admin'){
            this.getuserinfo(2)
        }else {
            this.getuserinfo(1)
        }
    }

    adshowModal = () => {
        const admininfo = JSON.parse(localStorage.getItem('admin'))
        if(!admininfo) return message.error('登录失效')
        if(admininfo.role != 1) return message.error('权限不够')
        this.setState({
            visible: true,
        });
    };

    adhandleOk = async e => {
        const { addadmin } = this.state
        if(!addadmin) return message.error('数据缺失')
        const res = await noticecreat(addadmin)
        const { success, msg } = res.data
        if(success){
            this.setState({
                visible: false,
            });
            this.getuserinfo()
            message.success(msg)
        }else {
            message.error(msg)
        }

    };

    adhandleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    adminname = e => {
        this.setState({
            addadmin: e.target.value
        })
    }

    render() {
        const { TextArea } = Input;
        const columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
            },
            {
                title: '公告内容',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '创建时间',
                dataIndex: 'addtime',
                key: 'addtime',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => {
                    return <Space size="middle">
                        <Popconfirm
                            title="你确定删除该公告?"
                            onConfirm={() => this.deleteclick(record)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" shape="circle" icon={<DeleteOutlined/>}/>
                        </Popconfirm>
                    </Space>
                }
            },
        ];

        return(
            <div className="admin">
                <div className="admin-tit">
                    <Breadcrumb>
                        <Breadcrumb.Item>主导页</Breadcrumb.Item>
                        <Breadcrumb.Item>社区管理</Breadcrumb.Item>
                        <Breadcrumb.Item>公告管理</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="admin-check">
                    <Button type="primary" icon={<PlusOutlined />} size="large" onClick={this.adshowModal} />
                </div>
                <Table columns={columns} dataSource={this.state.data} />
                <Modal
                    title="发布公告"
                    visible={this.state.visible}
                    onOk={this.adhandleOk}
                    onCancel={this.adhandleCancel}
                >
                    <Space direction="vertical">
                        内容: <TextArea style={{width: 400}} placeholder="请输入详情公告" onChange={this.adminname} />
                    </Space>
                </Modal>
            </div>
        )
    }

}

export default Noticelist
